import React, { useEffect, useState } from "react";
import cls from "@/styles/pages/users/CreateUser.module.scss";
import { UserI } from "@/models/user";
import { CreateUserAvatar } from "@/feature/CreateUser/CreateUserAvatar/CreateUserAvatar";
import CreateUserForm from "@/feature/CreateUser/CreateUserForm/CreateUserForm";
import { getUser } from "@/api/users";
import { useParams } from "react-router-dom";
import { useUserMe } from "@/store/auth";

const initialData: Partial<UserI> = {
  first_name: "",
  second_name: "",
  last_name: "",
  user_permissions: [],
};

const Profile = () => {
  const { userMe } = useUserMe();

  return (
    <div className={cls.root}>
      <div className={cls.block}>
        {!!userMe && (
          <CreateUserAvatar user={userMe} updateUser={() => null} isProfile />
        )}
      </div>
      <div className={cls.block}>
        {!!userMe && (
          <CreateUserForm
            user={userMe}
            updateUser={() => null}
            onSave={() => console.log(userMe)}
            isProfile
          />
        )}
      </div>
    </div>
  );
};

export default Profile;
